<template>
    <div>
        <el-table :data="state" style="width: 100%" border>
            <el-table-column prop="date" label="Date" align="center">
                <template #header>
                    <input type="checkbox" v-model="allChoseOr" @click="allChose(allChoseOr)">
                </template>
                <template #default="scoped">
                    <input type="checkbox" v-model="showOr[scoped.row.id]">
                </template>
            </el-table-column>
            <el-table-column prop="brandId" label="编号" align="center"></el-table-column>
            <el-table-column prop="brandName" label="品牌名称" align="center"></el-table-column>
            <el-table-column label="是否推荐" align="center">
                <template #default="scoped">
                    <el-switch :value="scoped.row.recommendStatus == 1" @change="hdclick(scoped.row.id,scoped.row.recommendStatus)"  />
                </template>
            </el-table-column>
            <el-table-column label="排序" align="center">
                <template #default="scoped">
                    {{ scoped.row.sort }}
                </template>
            </el-table-column>

            <el-table-column label="状态" align="center">
                <template #default="scoped">
                    {{ scoped.row.recommendStatus == 1
                        ? '推荐中'
                        : '未推荐' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
                <template #default="scoped">
                    <i class="dosth">设置排序</i>&nbsp;
                    <i class="dosth"><el-button text @click="open(scoped.row.id)"
                            style="color : red;">删除</el-button></i>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="downlist">
        <input type="text" list="changelist" placeholder="批量操作" v-model="isRecommend">
        <datalist id="changelist">
            <option value="设为推荐"></option>
            <option value="取消推荐"></option>
            <option value="删除"></option>
        </datalist>
        <button @click="sureClickFn">确认</button>
    </div>


    <div style="display: flex; justify-content: flex-end;padding-top: 20px;">
        <el-pagination :current-page="pageNum" :default-page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref , watch ,reactive} from 'vue'



let handleSizeChange = (e: number) => {
    emit('update:pageSize', e)
    emit('updateAX')
}
let handleCurrentChange = (e: number) => {
    emit('update:pageNum', e)
    emit('updateAX')

}

const open = (e: number) => {
    ElMessageBox.confirm(
        '是否确认删除',
        '确认框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            emit('DeleteLists',e)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}
let props =  defineProps<{
    state: Array<any>, //接收传进来的参数
    pageNum: number,
    pageSize: number,
    total: number
}>()
let emit = defineEmits<{
    (state: 'update:state'): void //双向绑定列表数据
    (pageNum: 'update:pageNum', e: number): void  //双向绑定页数
    (pageSize: 'update:pageSize', e: number): void
    (updateAX: 'updateAX'): void // 更新函数
    (DeleteLists : 'DeleteLists',e:any) :void //删除函数
    (update : 'update',e:number | Array<number> , i : number) :void // 修改推荐状态
}>()
let hdclick = (e:number ,i: number )=>{  //滑块开关的内容 返回新的状态
    emit('update',e,i)
}

// 循环添加默认状态的参数
let showOr = reactive({})
// 监听传递下来的动作
watch(props,(newval)=>{
    for(let i in newval.state){
        showOr[newval.state[i].id] = false
    }
},{
    deep : true
})
let isRecommend = ref('') //批量进行推荐的状态  点击传递id和状态到外界
let sureClickFn = ()=>{
    if(isRecommend.value == ''){
        return //简单的判空
    }
    // 添加一个判断条件
    // 将需要传递的参数传递出去
    let ids:Array<number> = []
    for(let item in showOr){
        if(showOr[item]){
            ids.push(Number(item))
        }
    }
    let recommendStatus = isRecommend.value == '设为推荐' ? 0 : (isRecommend.value == '取消推荐' ? 1 : 100) 
    // 最后 把ids和 isRecommend.value 传递出去 第三个参数
    emit('update',ids,recommendStatus)
    isRecommend.value = ''
}

// 全选,全不选
let allChoseOr = ref(false) //按钮状态
watch(showOr,(newVal)=>{
    for(let item in showOr ){
        if(!showOr[item] == true){
            allChoseOr.value = false
            return
        }
    }
    allChoseOr.value = true
},{
    deep:true
})
// 全选点击事件
let allChose = (e)=>{
    for(let item in showOr ){
        showOr[item] = !e
    }
}
</script>
 
<style lang="scss" scoped>
i {
    cursor: pointer;
}

.dosth {
    color: rgb(64, 158, 255);
}
.downlist{
    padding: 20px;
    display: flex;
    align-items: center;
    input {
        width: 200px;
        border: 1px solid #999;
        outline: none;
        height: 26px;
        padding-left: 10px;
    }
    button {
        height: 30px;
        margin-left: 10px;
        background-color: rgb(64, 158, 255);
        border: 1px solid #999;
        color: white;
        border-radius: 3px;
        padding: 5px 13px;
         &:hover {
                        color: rgb(64, 158, 255);
                    }
    }

}
</style>